<template>
  <div>
    <!-- 查询参数及按钮部分 -->
    <div class="filter-container">
      <el-dialog  v-dialogDrag  
        :close-on-click-modal="false"
        title="查询"
        :visible.sync="dialogQueryFormVisible"
        style="padding:0px;"
        width="50%"
      >
        <el-form
          ref="dataForm"
          class="dialog-Backgroundcolor"
          :model="listQuery"
          label-position="right"
          label-width="100px"
        >
          <el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="工资类别：">
                  <el-select
                    v-model="listQuery.meritPayCode"
                    class="filter-item inputWidth"
                    clearable
                    placeholder="--请选择--"
                  >
                    <el-option
                      label="行政人员"
                      value="0"
                    />
                    <el-option
                      label="事业人员"
                      value="1"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职务：">
                  <el-select
                    v-model="listQuery.posCode"
                    class="filter-item inputWidth"
                    clearable
                    placeholder="--请选择--"
                  >
                    <el-option
                      v-for="item in posgrLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="职级：">
                  <el-select
                    v-model="listQuery.grCode"
                    class="filter-item inputWidth"
                    clearable
                    placeholder="--请选择--"
                  >
                    <el-option
                      v-for="item in grLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="人员姓名：">
                  <el-input
                    v-model="listQuery.personName"
                    class="inputWidth"
                  />
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="身份证号码：">
                  <el-input
                    v-model="listQuery.idenNo"
                    class="inputWidth"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="人员类别：">
                  <el-select
                    v-model="listQuery.state"
                    class="filter-item"
                    placeholder="--请选择--"
                  >
                    <el-option
                      label="全部人员"
                      value=""
                    />
                    <el-option
                      label="在职人员"
                      value="3"
                    />
                    <el-option
                      label="离退休人员"
                      value="1"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-button
              type="primary"
              style="float:right;"
              @click="handleQuery"
            >
              查询
            </el-button>

          </el-row>
        </el-form>
      </el-dialog>
      <el-row>

        <el-col :span="12">

          <el-select
            v-model="listQuery.state"
            class="filter-item"
            placeholder="--请选择--"
            @change="handleFilter"
          >
            <el-option
              label="全部人员"
              value=""
            />
            <el-option
              label="在职人员"
              value="3"
            />
            <el-option
              label="离退休人员"
              value="1"
            />
          </el-select>

        </el-col>
      </el-row>
      <el-row>
        <el-col class="numCol">
          <span>单位名称：{{ unitName }} </span>
          <span> 在编人数：{{ registerNum }}人 其中：离退休：{{ quitNum }}人</span>
        </el-col>

      </el-row>
    </div>

    <!-- 表格部分 -->
    <el-table
      ref="singalTable"
      v-loading="listLoading"
      :data="list"
      :stripe="true"
      fit
      :height="tableHeight"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      @cell-dblclick="editclick"
    >
      <template slot="empty">
        <tableEmpty />
      </template>
      <el-table-column
        type="selection"
        width="55"
        align="center"
        fixed
      />
      <el-table-column
        type="index"
        align="center"
        width="50"
        label="序号"
        fixed
      />
      <el-table-column
        v-if="tabPane == 'all'"
        label="变动状态"
        align="center"
        width="100"
        fixed
      >
        <template slot-scope="{row}">
          <span>{{ row.operateCode | changeFlag(row) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tabPane != 'all'"
        label="增减情况"
        align="center"
        width="100"
        fixed
      >
        <template slot-scope="{row}">
          <span>{{ row.operateCode | changeFlag(row) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tabPane != 'all'"
        label="变动原因"
        align="center"
        width="120"
        fixed
      >
        <template slot-scope="{row}">
          <span>{{ row.deleteType | parseReason(row) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
        align="center"
        width="100"
        fixed
      >
        <template slot-scope="{row}">
          <el-link
            type="primary"
            @click="viewInfo(row)"
          >
            <span>{{ row.personName }}</span>
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="证件号码"
        align="center"
        width="200"
      >
        <template slot-scope="{row}">
          <span>{{ row.idenNo  }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="性别"
        align="center"
        width="100"
      >
        <template slot-scope="{row}">
          <span>{{ row.sexCode | sexFilter(that) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="民族"
        align="center"
        width="100"
      >
        <template slot-scope="{row}">
          <span>{{ row.natCode | natFilter(that) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="人员状态"
        align="center"
        width="100"
      >
        <template slot-scope="{row}">
          <span>{{ row.state | personFlagFilter(that) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="学历"
        align="center"
        width="100"
      >
        <template slot-scope="{row}">
          <span>{{ row.schRecCode | schrecFilter(that) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="职务"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          <span>{{ row.posCode | posgrFilter(that) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="职级"
        align="center"
        width="100"
      >
        <template slot-scope="{row}">
          <span>{{ row.grCode | grFilter(that) }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column-->
      <!--        label="是否在编"-->
      <!--        align="center"-->
      <!--        width="100"-->
      <!--      >-->
      <!--        <template slot-scope="{row}">-->
      <!--          <span>{{ row.isAuth | authFilter(that) }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column
        label="工资级别"
        align="center"
        width="100"
      >
        <template slot-scope="{row}">
          <span>{{ row.salaGrCode | salagrFilter(that) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="出生日期"
        align="center"
        width="100"
      >
        <template slot-scope="{row}">
          <span>{{ row.birthday }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="入职时间"
        align="center"
        width="100"
      >
        <template slot-scope="{row}">
          <span>{{ row.enterAgencyDate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="离退休时间"
        align="center"
        width="100"
      >
        <template slot-scope="{row}">
          <span>{{ row.retireDate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="参加工作时间"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          <span>{{ row.workInitDate }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="调离时间"
        align="center"
        width="100"
      >
        <template slot-scope="{row}">
          <span>{{ row.endDate }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column
        label="死亡时间"
        align="center"
        width="100"
      >
        <template slot-scope="{row}">
          <span>{{ row.deadDate }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column
        label="备注"
        align="center"
        width="200"
      >
        <template slot-scope="{row}">
          <span>{{ row.remarks }}</span>
        </template>
      </el-table-column> -->
    </el-table>
    <pagination
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <!-- 新增页面 -->
    <el-dialog  v-dialogDrag  
      :close-on-click-modal="false"
      :title="addDialogTitle"
      :visible.sync="addFormVisible"
      width="50%"
    >
      <el-form class="addForm dialog-backgroundcolor">
        <el-row>
          <span class="selectSpan">请选择人员类型：</span>
        </el-row>
        <el-row class="addSelectRow">
          <el-form-item>
            <el-select
              v-model="formData.state"
              class="filter-item"
              placeholder="--请选择--"
            >
              <el-option
                label="在职人员"
                value="3"
              />
              <el-option
                label="离退休人员"
                value="1"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="addButRow">
          <el-button
            type="primary"
            @click="handleAddDialog()"
          >
            新增
          </el-button>
          <el-button @click="addFormVisible = false">
            取消
          </el-button>
        </el-row>
        <el-row class="addTitpsRow">
          <span class="addTitps">注意：不同的人员类型需要的信息项是不同的，请务必正确选择人员类型。</span>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 在职人员页面部分 -->
    <el-dialog  v-dialogDrag  
      :close-on-click-modal="false"
      :title="dialogStatus"
      :visible.sync="registerFormVisible"
      width="70%"
    >
      <el-form
        ref="registerForm"
        class="dialog-Backgroundcolor"
        :rules="registerFormRules"
        :model="formData"
        label-position="top"
        size="small"
      >

        <el-row style="margin-left:60px;">
          <el-col :span="8">
            <el-form-item
              label="单位代码："
              prop="agencyCode"
            />
            <el-input
              v-model="formData.agencyCode"
              disabled
            />
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="单位名称："
              prop="agencyName"
            />
            <el-input
              v-model="formData.agencyName"
              disabled
            />
          </el-col>

          <el-col :span="8">
            <div class="redstar">
              <el-form-item
                label="工资类别："
                prop="meritPayCode"
              >
                <el-select
                  v-model="formData.meritPayCode"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    label="行政人员"
                    value="0"
                  />
                  <el-option
                    label="事业人员"
                    value="1"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-left:60px; margin-top:15px;">
          <el-col :span="8">
            <div class="redstar">
              <el-form-item
                label="姓名："
                prop="personName"
              >
                <el-input
                  v-model="formData.personName"
                  maxlength="38"
                />
              </el-form-item>

            </div>
          </el-col>
          <el-col :span="8">
            <div class="redstar">

              <el-form-item
                label="性别："
                prop="sexCode"
              >
                <el-select
                  v-model="formData.sexCode"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in sexLists"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="redstar">

              <el-form-item
                label="民族："
                prop="natCode"
              >
                <el-select
                  v-model="formData.natCode"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in natLists"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-left:60px;margin-top:15px;">
          <el-col :span="8">
            <div class="redstar">

              <el-form-item
                label="证件类型："
                prop="idenTypeCode"
              >
                <!-- :disabled="isEdit" -->
                <el-select
                  v-model="formData.idenTypeCode"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in citTypeLists"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="redstar">

              <el-form-item
                label="证件号码："
                prop="idenNo"
              >
                <!-- :disabled="isEdit" -->
                <el-input
                  v-model="formData.idenNo"
                  maxlength="18"
                  @blur="getName(formData.idenNo)"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="出生日期："
              prop="birthday"
            />
            <el-date-picker
              v-model="formData.birthday"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="出生日期"
              :disabled="isEdit"
            />
          </el-col>
        </el-row>
        <el-row style="margin-left:60px;margin-top:15px;">
          <el-col :span="8">
            <el-form-item
              label="学历："
              prop="schRecCode"
            />
            <el-select
              v-model="formData.schRecCode"
              class="filter-item"
              clearable
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in schrecLists"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="人员类型："
              prop="personTypeCode"
            />
            <el-select
              v-model="formData.personTypeCode"
              class="filter-item"
              clearable
              placeholder="--请选择--"
            >
              <el-option
                label="行政人员"
                value="0"
              />
              <el-option
                label="事业人员"
                value="1"
              />
            </el-select>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item
              label="家庭地址："
              prop="personAddress"
            />
            <el-input
              v-model="formData.personAddress"
              maxlength="300"
            />
          </el-col> -->
          <el-col :span="8">
            <el-form-item
              label="参加工作时间："
              prop="workInitDate"
            />
            <el-date-picker
              v-model="formData.workInitDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="参加工作时间"
            />
          </el-col>
        </el-row>
        <el-row style="margin-left:60px;margin-top:15px;">
          <!-- <el-col :span="8">
            <el-form-item
              label="是否在编："
              prop="isAuth"
            />
            <el-select
              v-model="formData.isAuth"
              class="filter-item"
              clearable
              placeholder="--请选择--"
            >
              <el-option
                label="是"
                :value="1"
              />
              <el-option
                label="否"
                :value="0"
              />
            </el-select>
          </el-col> -->

          <el-col :span="8">
            <el-form-item
              label="进入本单位时间："
              prop="enterAgencyDate"
            />
            <el-date-picker
              v-model="formData.enterAgencyDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="进入本单位时间"
            />
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="技术等级："
              prop="tecGrCode"
            />
            <el-select
              v-model="formData.tecGrCode"
              class="filter-item"
              clearable
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in tecgrLists"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="职务："
              prop="posCode"
            />
            <el-select
              v-model="formData.posCode"
              class="filter-item"
              clearable
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in posgrLists"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-left:60px;">

          <el-col :span="8">
            <el-form-item
              label="职级："
              prop="grCode"
            />
            <el-select
              v-model="formData.grCode"
              class="filter-item"
              clearable
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in grLists"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="工资级别："
              prop="salaGrCode"
            />
            <el-select
              v-model="formData.salaGrCode"
              class="filter-item"
              clearable
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in salagrLists"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <div class="redstar">

              <el-form-item
                label="工资卡开户银行："
                prop="salaCardBank"
              >
                <el-select
                  v-model="formData.salaCardBank"
                  :disabled="disable"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in agencyBankLists"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-left:60px;margin-top:15px;">

          <el-col :span="8">
            <div class="redstar">

              <el-form-item
                label="工资卡卡号："
                prop="salaCardNo"
              >
                <el-input
                  v-model="formData.salaCardNo"
                  maxlength="60"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="redstar">

              <el-form-item
                label="生效时间："
                prop="startDate"
              >
                <el-date-picker
                  v-model="formData.startDate"
                  disabled
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="生效时间"
                />
              </el-form-item>
            </div>
          </el-col>
          <!-- <el-col :span="8">
            <div class="redstar">

              <el-form-item
                label="国籍："
                prop="nation"
              >
                <el-select
                  v-model="formData.nation"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in countryLists"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col> -->
          <el-col :span="8">
            <div class="redstar">

              <el-form-item
                label="人员身份："
                prop="personIdeCode"
              >
                <el-select
                  v-model="formData.personIdeCode"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in personPerideLists"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-left:60px;margin-top:15px;">
          <!-- <el-col :span="8">
            <div class="redstar">

              <el-form-item
                label="经费保障方式："
                prop="fundmode"
              >
                <el-select
                  v-model="formData.fundmode"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in fundmodeLists"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col> -->
          <!-- <el-col :span="8">
            <div class="redstar">

              <el-form-item
                label="是否特殊岗位："
                prop="isSpecialPost"
              >
                <el-select
                  v-model="formData.isSpecialPost"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    label="是"
                    :value="1"
                  />
                  <el-option
                    label="否"
                    :value="0"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col
            :span="24"
            style="text-align: center;margin-top:20px"
          >
            <el-button
              type="primary"
              :loading="registerLoading"
              @click="handleAddPerson('registerForm')"
            >
              保存
            </el-button>
            <el-button @click="registerFormVisible = false">
              取消
            </el-button>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>
    <!-- 离休人员页面-->
    <el-dialog  v-dialogDrag  
      :close-on-click-modal="false"
      :title="dialogStatus"
      :visible.sync="quitFormVisible"
      width="60%"
    >
      <el-form
        ref="quitForm"
        class="dialog-Backgroundcolor"
        :rules="quitFormRules"
        :model="formData"
        label-position="top"
        size="small"
      >
        <el-row style="margin-left:45px">
          <el-col :span="8">
            <div class="redstar">
              <el-form-item
                label="姓名："
                prop="personName"
              >
                <el-input
                  v-model="formData.personName"
                  maxlength="38"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="redstar">
              <el-form-item
                label="性别："
                prop="sexCode"
              >
                <el-select
                  v-model="formData.sexCode"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in sexLists"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="redstar">
              <el-form-item
                label="民族："
                prop="natCode"
              >
                <el-select
                  v-model="formData.natCode"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in natLists"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-left:45px;margin-top:15px">
          <!-- <el-col :span="8">
            <el-form-item
              label="国籍："
              prop="nation"
            />
            <el-select
              v-model="formData.nation"
              class="filter-item"
              clearable
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in countryLists"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-col> -->
          <el-col :span="8">
            <div class="redstar">
              <el-form-item
                label="身份证号码："
                prop="idenNo"
              >
                <!-- :disabled="isEdit" -->
                <el-input
                  v-model="formData.idenNo"
                  maxlength="18"
                  @blur="getName(formData.idenNo)"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="出生日期："
              prop="birthday"
            />
            <el-date-picker
              v-model="formData.birthday"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="出生日期"
              :disabled="isEdit"
            />
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="工作单位："
              prop="agencyName"
            />
            <el-input
              v-model="formData.agencyName"
              disabled
            />
          </el-col>
        </el-row>
        <el-row style="margin-left:45px;margin-top:15px">

          <!-- <el-col :span="8">
            <el-form-item
              label="家庭地址："
              prop="personAddress"
            />
            <el-input
              v-model="formData.personAddress"
              maxlength="300"
            />
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="是否统发工资：" prop="isUniSala">
              <el-select v-model="formData.isUniSala" class="filter-item" placeholder="--请选择--">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col> -->

          <el-col :span="8">
            <el-form-item
              label="参加工作时间："
              prop="workInitDate"
            />
            <el-date-picker
              v-model="formData.workInitDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="参加工作时间"
              @change="calculationWorkYear('workInitDate')"
            />
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="离退休时间："
              prop="retireDate"
            />
            <el-date-picker
              v-model="formData.retireDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="离退休时间"
              @change="calculationWorkYear('retireDate')"
            />
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="工龄："
              prop="workingYear"
            />
            <el-input
              v-model="formData.workingYear"
              disabled
            />
          </el-col>

        </el-row>
        <el-row style="margin-left:45px;margin-top:15px">

          <el-col :span="8">
            <el-form-item
              label="退休时职级："
              prop="grCode"
            />
            <el-select
              v-model="formData.grCode"
              class="filter-item"
              clearable
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in grLists"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <div class="redstar">
              <el-form-item
                label="工资卡开户银行："
                prop="salaCardBank"
              >
                <el-select
                  v-model="formData.salaCardBank"
                  :disabled="disable"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in agencyBankLists"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="redstar">
              <el-form-item
                label="工资卡卡号："
                prop="salaCardNo"
              >
                <el-input
                  v-model="formData.salaCardNo"
                  maxlength="60"
                />
              </el-form-item>

            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :span="24"
            style="text-align: center;margin-top:30px"
          >
            <el-button
              type="primary"
              :loading="quitLoading"
              @click="handleAddPerson('quitForm')"
            >
              保存
            </el-button>
            <el-button @click="quitFormVisible = false">
              取消
            </el-button>
          </el-col>
        </el-row>
      </el-form>

    </el-dialog>
    <!-- 调出页面  -->
    <el-dialog  v-dialogDrag  
      :close-on-click-modal="false"
      title="调出"
      :visible.sync="outFormVisible"
      width="70%"
      max-height="500px"
    >
      <el-form
        ref="outForm"
        :rules="outFormRules"
        class="dialog-Backgroundcolor"
        :model="formData"
        label-position="top"
        size="small"
      >
        <el-row class="el-row-out">
          <el-col :span="16">
            <el-row>
              <el-col :span="11">
                <el-form-item
                  label="人员姓名："
                  prop="personName"
                />
                <el-input
                  v-model="formData.personName"
                  class="inputWidth"
                  disabled
                />
              </el-col>
              <el-col :span="11">
                <el-form-item
                  label="证件号码："
                  prop="idenNo"
                />
                <el-input
                  v-model="formData.idenNo"
                  class="inputWidth"
                  disabled
                />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item
                  label="原单位代码："
                  prop="agencyCode"
                />
                <el-input
                  v-model="formData.agencyCode"
                  class="inputWidth"
                  disabled
                />
              </el-col>
              <el-col :span="11">
                <el-form-item
                  label="原单位名称："
                  prop="agencyName"
                />
                <el-input
                  v-model="formData.agencyName"
                  class="inputWidth"
                  disabled
                />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item
                  label="生效时间："
                  prop="startDate"
                />
                <el-date-picker
                  v-model="formData.startDate"
                  type="date"
                  disabled
                  class="inputWidth"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="生效时间"
                />
              </el-col>
              <el-col :span="11">
                <el-form-item
                  label="去向单位："
                  prop="toAgencyName"
                >
                  <el-input
                    v-model="formData.toAgencyName"
                    clearable
                  />
                </el-form-item>

              </el-col>
              <!-- <el-col :span="1">
                <el-button type="primary" icon="el-icon-position" circle @click="handleShowTree" />
              </el-col> -->
            </el-row>
            <el-row>
              <el-col
                :span="16"
                style="margin-top:20px;text-align:center; margin-left:50px"
              >
                <el-button
                  type="primary"
                  :loading="outLoading"
                  @click="handleOutSave"
                >
                  保存
                </el-button>
                <el-button @click="outFormVisible = false">
                  取消
                </el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :span="20"
                class="tipsCol"
              >
                <span class="tipsSpan">请从右侧单位树选择去向单位（调入单位）。调到外省的人员应从【消减】入口录入，按照人员【消减】处理。操作时，应上传相关的调转文件到系统中。</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-tree
                ref="tree"
                :data="agencyData"
                :props="defaultProps"
                :filter-node-method="filterNode"
                node-key="code"
                :default-expanded-keys="['0']"
                class="el-tree-out"
                style="height:413px"
                @node-click="handleNodeClick"
              />
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 消减页面  -->
    <el-dialog  v-dialogDrag  
      :close-on-click-modal="false"
      title="人员消减"
      :visible.sync="reductionFormVisible"
      width="55%"
      max-height="500px"
    >
      <el-form
        ref="reductionForm"
        class="dialog-Backgroundcolor"
        :rules="reductionFormRules"
        :model="formData"
        label-position="top"
        size="small"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="单位代码："
              prop="agencyCode"
            />
            <el-input
              v-model="formData.agencyCode"
              disabled
            />
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="单位名称："
              prop="agencyName"
            />
            <el-input
              v-model="formData.agencyName"
              disabled
            />
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="工资类别："
              prop="meritPayCode"
            />
            <el-select
              v-model="formData.meritPayCode"
              class="filter-item inputWidth"
              placeholder="--请选择--"
              disabled
            >
              <el-option
                label="行政人员"
                value="0"
              />
              <el-option
                label="事业人员"
                value="1"
              />
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="姓名："
              prop="personName"
            />
            <el-input
              v-model="formData.personName"
              disabled
            />
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="性别："
              prop="sexCode"
            />
            <el-select
              v-model="formData.sexCode"
              class="filter-item inputWidth"
              placeholder="--请选择--"
              disabled
            >
              <el-option
                v-for="item in sexLists"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="民族："
              prop="natCode"
            />
            <el-select
              v-model="formData.natCode"
              class="filter-item inputWidth"
              placeholder="--请选择--"
              disabled
            >
              <el-option
                v-for="item in natLists"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="证件类型："
              prop="idenTypeCode"
            />
            <el-select
              v-model="formData.idenTypeCode"
              class="filter-item inputWidth"
              placeholder="--请选择--"
              disabled
            >
              <el-option
                v-for="item in citTypeLists"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="证件号码："
              prop="idenNo"
            />
            <el-input
              v-model="formData.idenNo"
              class="inputWidth"
              disabled
            />
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="出生日期："
              prop="birthday"
            />
            <el-date-picker
              v-model="formData.birthday"
              class="inputWidth"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="出生日期"
              disabled
            />
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col class="reductionTipsCol">
            <span class="reductionTips">温馨提示：请确认上面信息无误后进行再进行下面的减员操作和上传相关文件。</span>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="redstar">
              <el-form-item
                label="人员消减类型："
                prop="deleteType"
              >
                <el-select
                  v-model="formData.deleteType"
                  class="filter-item inputWidth"
                  placeholder="--请选择--"
                >
                  <el-option
                    label="调出删除"
                    value="0"
                  />
                  <el-option
                    label="办理退休"
                    value="1"
                  />
                  <el-option
                    label="去世消减"
                    value="2"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">

            <el-form-item
              label="生效时间："
              prop="startDate"
            >
              <el-date-picker
                v-model="formData.startDate"
                class="inputWidth"
                disabled
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="生效时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :span="16"
            style="text-align: center;margin-left:150px; margin-top:20px"
          >
            <el-button
              type="primary"
              :loading="reducationLoading"
              @click="handleReducationSave"
            >
              保存
            </el-button>
            <el-button @click="reductionFormVisible = false">
              取消
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog  v-dialogDrag  
      :close-on-click-modal="false"
      title="导入"
      :visible.sync="dialogImportFormVisible"
      width="29%"
    >
      <el-upload
        class="upload-demo"
        drag
        style="padding-left:2px"
        action="#"
        list-type="multipart/form-data"
        accept=".xls,.xlsx"
        :show-file-list="false"
        :http-request="uploadExcel"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div
          slot="tip"
          class="el-upload__tip"
        />
      </el-upload>

    </el-dialog>
    <!-- 跨行修改  -->
    <el-dialog  v-dialogDrag  
      :close-on-click-modal="false"
      :title="updateStatus"
      :visible.sync="updateFormVisible"
      width="40%"
    >
      <el-form
        ref="quitForm"
        class="dialog-Backgroundcolor"
        :rules="quitFormRules"
        :model="formData"
        label-position="top"
        size="small"
      >
        <el-row style="margin-left:20px">
          <el-col :span="12">
            <div class="redstar">
              <el-form-item
                label="姓名："
                prop="personName"
              >
                <el-input
                  v-model="formData.personName"
                  maxlength="38"
                  disabled
                />
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="redstar">
              <el-form-item
                label="证件号码："
                prop="idenNo"
              >
                <!-- :disabled="isEdit" -->
                <el-input
                  v-model="formData.idenNo"
                  maxlength="18"
                  disabled
                  @blur="getName(formData.idenNo)"
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-row style="margin-left:20px;margin-top:15px">
          <el-col :span="12">
            <div class="redstar">
              <el-form-item
                label="工资卡开户银行："
                prop="salaCardBank"
              >
                <el-select
                  v-model="formData.salaCardBank"
                  :disabled="disable"
                  class="filter-item"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in agencyBankLists"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="redstar">
              <el-form-item
                label="工资卡卡号："
                prop="salaCardNo"
              >
                <el-input
                  v-model="formData.salaCardNo"
                  maxlength="60"
                />
              </el-form-item>

            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :span="24"
            style="text-align: center;margin-top:30px"
          >
            <el-button
              type="primary"
              :loading="updateFormVisibleLoading"
              @click="handleAddPersonupdate('quitForm')"
            >
              保存
            </el-button>
            <el-button @click="updateFormVisible = false">
              取消
            </el-button>
          </el-col>
        </el-row>
      </el-form>

    </el-dialog>
    <Enclosure
      ref="enc"
      :middle-table-code="2"
    />
    <PersonSalaryInfo ref="personSalaryInfo" />
  </div>
</template>
<script>
import {
  getPersonOperateList,
  savePersonInfo,
  revokeOperate,
  getStateNum,
  submitPersonOperateList,
  undoSubmitPersonOperateList,
  queryAgencyInfoById,
  outPutPersonOperateList,
  queryPersonFileNum
} from '@/api/personInfoMaintenance/personChangeEdit'
import {
  getSex,
  getNat,
  getCitType,
  getSchrec,
  getPosgr,
  getAgencyPeride,
  getFundmode,
  getGr,
  getTecgr,
  getSalagr,
  getAgencyBank,
  getCountry,
  getAgencyTree,
  Export,
  Import,
  getSalaryState
} from '@/api/baseInfo'
import { getAgencyVerifyByAgencyId } from '@/api/agencyVerify'
import Enclosure from '@/components/Enclosure'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import tableEmpty from '@/components/table/empty'
import PersonSalaryInfo from '@/components/personSalaryInfo/personSalaryInfo'
export default {
  name: 'Unit',
  components: { Pagination, tableEmpty, Enclosure, PersonSalaryInfo },
  directives: { waves },
  filters: {
    changeFlag(type, row) {
      const verifyState = row.verifyState
      if (row.verifyState === '2' && row.isReal === 0) {
        let value = ''
        if (type === 'add') {
          value = '增员'
        } else if (type === 'edit') {
          value = '修改'
        } else if (type === 'in') {
          value = '增员'
        } else if (type === 'out') {
          value = '减员'
        } else if (type === 'delete') {
          value = '消减'
        }else if (type === 'stop') {
          value =  '停发'
        } else if (type === 'cancelstop') {
          value =  '续发'
        }
        return value + '-待生效'
      } else if (
        (type === 'add' && verifyState === '2') ||
        (type === 'edit' && verifyState === '2') ||
        (type === 'in' && verifyState === '2')
      ) {
        return '正常'
      } else if (type === 'in' && verifyState === null) {
        return '待调入'
      } else if (type === 'add') {
        return '增员'
      } else if (type === 'edit') {
        return '修改'
      } else if (type === 'out') {
        return '减员'
      } else if (type === 'in') {
        return '增员'
      } else if (type === 'delete') {
        return '消减'
      }else if (type === 'stop') {
        return '停发'
      } else if (type === 'cancelstop') {
        return '续发'
      }
    },
    parseReason(type, row) {
      if (row.operateCode === 'add') {
        return '新增'
      } else if (row.operateCode === 'edit') {
        return '修改人员信息'
      } else if (row.operateCode === 'out') {
        return '省内调出'
      } else if (row.operateCode === 'in') {
        return '省内调入'
      } else if (type === '0') {
        return '调出删除'
      } else if (type === '1') {
        return '办理退休'
      } else if (type === '2') {
        return '去世消减'
      }
    },

    // 性别过滤器
    sexFilter(type, that) {
      const sexLists = that.sexLists
      for (const item in sexLists) {
        if (sexLists[item].code === type) {
          return sexLists[item].name
        }
      }
    },
    // 民族过滤器
    natFilter(type, that) {
      const natLists = that.natLists
      for (const item in natLists) {
        if (natLists[item].code === type) {
          return natLists[item].name
        }
      }
    },
    // 学历过滤器
    schrecFilter(type, that) {
      const schrecLists = that.schrecLists
      for (const item in schrecLists) {
        if (schrecLists[item].code === type) {
          return schrecLists[item].name
        }
      }
    },
    // 职务过滤器
    posgrFilter(type, that) {
      const posgrLists = that.posgrLists
      for (const item in posgrLists) {
        if (posgrLists[item].code === type) {
          return posgrLists[item].name
        }
      }
    },
    // 职级过滤器
    grFilter(type, that) {
      const grLists = that.grLists
      for (const item in grLists) {
        if (grLists[item].code === type) {
          return grLists[item].name
        }
      }
    },
    // 工资级别过滤器
    salagrFilter(type, that) {
      const salagrLists = that.salagrLists
      for (const item in salagrLists) {
        if (salagrLists[item].code === type) {
          return salagrLists[item].name
        }
      }
    },
    // 人员状态过滤器
    personFlagFilter(type, that) {
      if (type === '1') {
        return '离退休'
      } else if (type === '3') {
        return '在职'
      }
    },
    //号码脱敏显示
    hideMiddle(val) {
      if(val!== undefined&& val!== null){//避免列表中存在空数据报错
        return `${val.substring(0,4)}****${val.substring(val.length-4)}`
      }else{
        return val
      }
    },
    // 是否在编过滤器
    authFilter(type, that) {
      if (type === 1) {
        return '是'
      } else if (type === 0) {
        return '否'
      }
    }
  },
  props: ['tabPane', 'treeData'],
  data() {
    return {
      tableHeight: null,
      disable: false,
      salaryState: '',
      bank: [],
      openenClose: true,
      selection: [],
      dialogQueryFormVisible: false,
      that: this,
      unitName: '',
      registerNum: '0',
      quitNum: '0',
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 200,
        meritPayCode: '',
        posCode: '',
        grCode: '',
        personName: '',
        idenNo: '',
        state: '',
        flag: 'all',
        agencyId: '0',
        agencyName: '',
        agencyCode: ''
      },
      formData: {
        id: '',
        state: '',
        operateCode: '',
        agencyId: '0',
        agencyCode: '',
        agencyName: '',
        meritPayCode: '',
        personName: '',
        sexCode: '',
        natCode: '',
        idenTypeCode: '',
        idenNo: '',
        birthday: '',
        schRecCode: '',
        personTypeCode: '',
        personAddress: '',
        isAuth: '',
        workInitDate: '',
        enterAgencyDate: '',
        posCode: '',
        grCode: '',
        tecGrCode: '',
        salaGrCode: '',
        salaCardNo: '',
        salaCardBank: '',
        govCredCardNo: '',
        govCredCardBank: '',
        startDate: new Date(),
        nation: '',
        isUniSala: '',
        retireDate: '',
        workingYear: '',
        personIdeCode: '',
        deleteType: '',
        fundmode: '',
        isSpecialPost: '',
        outToAgency: '', // 去向单位id
        toAgencyName: '' // 去向单位名称
      },
      addDialogTitle: '新增人员',
      addFormVisible: false,
      isEdit: false,
      isable: true,
      registerFormVisible: false,
      quitFormVisible: false,
      dialogImportFormVisible: false,
      updateFormVisible: false,
      updateFormVisibleLoading: false,
      updateStatus: '',
      dialogStatus: '',
      dialogTitle: '',
      sexLists: [], // 性别
      natLists: [], // 民族
      citTypeLists: [], // 证件类型代码
      schrecLists: [], // 学历
      posgrLists: [], // 职务
      grLists: [], // 职级
      tecgrLists: [], // 技术等级
      salagrLists: [], // 工资级别
      agencyBankLists: [], // 银行
      allBankLists: [],
      countryLists: [], // 国籍
      personPerideLists: [], // 人员身份
      fundmodeLists: [], // 人员经费保障方式
      registerFormRules: {
        agencyCode: [
          { required: true, message: '请输入单位代码', trigger: 'blur' }
        ],
        agencyName: [
          { required: true, message: '请输入单位名称', trigger: 'blur' }
        ],
        meritPayCode: [
          { required: true, message: '请输入工资类别', trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        sexCode: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        // natCode: [{ required: true, message: '请输入民族', trigger: 'blur' }],
        idenTypeCode: [
          { required: true, message: '请输入证件类型', trigger: 'blur' }
        ],
        idenNo: [
          { required: true, message: '请输入证件号码', trigger: 'blur' },
          {
            pattern: /((^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$))|(^[\u4E00-\u9FA5](字第)([0-9a-zA-Z]{4,10})(号?)$)/,
            message: '证件号码格式有误！',
            trigger: 'blur'
          }
        ],
        salaCardNo: [
          { required: true, message: '请输入工资卡卡号', trigger: 'blur' },
          {
            // pattern: /^([1-9]{1})(\d{14}|\d{15}|\d{16}|\d{17}|\d{18})$/,
            pattern: /^[1-9]{1}\d+$/,
            message: '请输入正确的银行卡号',
            trigger: 'blur'
          }
        ],
        salaCardBank: [
          { required: true, message: '请输入工资卡开户银行', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '请输入生效时间', trigger: 'blur' }
        ],
        // nation: [{ required: true, message: '请输入国籍', trigger: 'blur' }],
        personIdeCode: [
          { required: true, message: '请输入人员身份', trigger: 'blur' }
        ],
        fundmode: [
          // { required: true, message: '请输入经费保障方式', trigger: 'blur' }
        ],
        isSpecialPost: [
          // { required: true, message: '请输入是否特殊岗位', trigger: 'blur' }
        ]
      },
      quitFormRules: {
        personName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        sexCode: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        // natCode: [{ required: true, message: '请输入民族', trigger: 'blur' }],
        idenNo: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: '证件号码格式有误！',
            trigger: 'blur'
          }
        ],
        salaCardBank: [
          { required: true, message: '请输入工资卡开户银行', trigger: 'blur' }
        ],
        salaCardNo: [
          { required: true, message: '请输入工资卡卡号', trigger: 'blur' },
          {
            // pattern: /^([1-9]{1})(\d{14}|\d{15}|\d{16}|\d{17}|\d{18})$/,
            pattern: /^[1-9]{1}\d+$/,
            message: '请输入正确的银行卡号',
            trigger: 'blur'
          }
        ]
      },
      outFormRules: {
        agencyCode: [
          { required: true, message: '请输入原单位代码', trigger: 'blur' }
        ],
        agencyName: [
          { required: true, message: '请输入原单位名称', trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '请输入人员姓名', trigger: 'blur' }
        ],
        idenNo: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '请输入生效时间', trigger: 'blur' }
        ],
        toAgencyName: [
          { required: true, message: '请输入去向单位', trigger: 'blur' }
        ]
      },
      reductionFormRules: {
        // agencyCode: [
        //   { required: true, message: '请输入原单位代码', trigger: 'blur' }
        // ],
        // agencyName: [
        //   { required: true, message: '请输入原单位名称', trigger: 'blur' }
        // ],
        // meritPayCode: [
        //   {
        //     required: true,
        //     message: '请输入原单位名称工资类别',
        //     trigger: 'blur'
        //   }
        // ],
        // personName: [
        //   { required: true, message: '请输入人员姓名', trigger: 'blur' }
        // ],
        // sexCode: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        // natCode: [{ required: true, message: '请输入民族', trigger: 'blur' }],
        // idenNo: [
        //   { required: true, message: '请输入身份证号码', trigger: 'blur' }
        // ],
        deleteType: [
          { required: true, message: '请输入人员消减类型', trigger: 'blur' }
        ]
        // startDate: [
        //   { required: true, message: '请输入生效时间', trigger: 'blur' }
        // ]
      },
      outFormVisible: false, // 调出弹出框状态
      agencyData: [], // 树数据集合
      operatePersonLists: [], // 操作人员集合
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      showTree: false, // 是否显示树
      reductionFormVisible: false, // 消减弹出框状态
      registerLoading: false, // 在职页面保存按钮loading
      quitLoading: false, // 离休页面保存按钮loading
      outLoading: false, // 调出页面保存按钮loading
      reducationLoading: false, // 消减页面保存按钮loading
      agencyTree: {}
    }
  },
  watch: {
    'formData.toAgencyName'(val) {
      this.$refs.tree.filter(val)
    },
    // 表格的数据数组
    list(val) {
      this.doLayout()
    },
    treeData(val) {
      if (val && val.isleaf === '1') {
        this.handleTree(val)
      }
    }
  },
  mounted() {
    this.getTbHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  created() {
    this.initBaseInfo()
    if (this.treeData && this.treeData.isleaf === '1') {
      this.listQuery.agencyId = this.treeData.id
      this.listQuery.agencyCode = this.treeData.label.split('-')[0]
      this.listQuery.agencyName = this.treeData.label.split('-')[1]
      this.unitName = this.treeData.label.split('-')[1]
      this.formData.agencyId = this.treeData.id
      this.formData.agencyCode = this.treeData.label.split('-')[0]
      this.formData.agencyName = this.treeData.label.split('-')[1]
      this.listQuery.flag = this.tabPane
      this.getBankByAgencyId()
      this.listQuery.flag = this.tabPane
      this.handleFilter()
      // 获取在职和离休人数
      this.getStateNum()
      this.getSalaryState()
    }
  },
  methods: {
    // 获取table高度的方法
    getTbHeight() {
      this.tableHeight = window.innerHeight - 300
    },
    /* 重新渲染table组件 */
    doLayout() {
      this.$nextTick(() => {
        this.$refs.singalTable.doLayout()
      })
    },
    // 身份证获取生日
    getName(iden) {
      const val = iden.length
      let birth = null
      const myDate = new Date()
      const month = myDate.getMonth() + 1
      const day = myDate.getDate()
      let age = 0 // eslint-disable-line no-unused-vars
      if (val === 18) {
        birth =
          iden.substring(6, 10) +
          '-' +
          iden.substring(10, 12) +
          '-' +
          iden.substring(12, 14)
        age = myDate.getFullYear() - iden.substring(6, 10) - 1
        if (
          iden.substring(10, 12) < month ||
          (iden.substring(10, 12) === month && iden.substring(12, 14) <= day)
        ) { age++ }
      }
      if (val === 15) {
        birth =
          '19' +
          iden.substring(6, 8) +
          '-' +
          iden.substring(8, 10) +
          '-' +
          iden.substring(10, 12)
        age = myDate.getFullYear() - iden.substring(6, 8) - 1901
        if (
          iden.substring(8, 10) < month ||
          (iden.substring(8, 10) === month && iden.substring(10, 12) <= day)
        ) { age++ }
      }

      this.formData.birthday = birth
    },

    // 双击
    editclick(row, column, event, cell) {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        return
      }
      if (this.tabPane === '1') {
      } else {
        this.isEdit = true
        this.disable = false
        const selection = row
        //   if (selection.length !== 1) {
        //   this.$message({
        //     showClose: true,
        //     message: '请选择一条数据',
        //     type: 'warning',
        //     duration: 2000
        //   })
        //   return
        // }
        const operateCode = selection.operateCode
        const verifyState = selection.verifyState
        const isReal = selection.isReal
        if (verifyState === '2' && isReal === 0) {
          this.$message({
            showClose: true,
            message: '未生效数据不允许修改',
            type: 'warning',
            duration: 4000
          })
          return
        }
        // 如果上一次是编辑，并且已送审核，则不允许修改
        if (operateCode === 'edit' && verifyState === '1') {
          this.$message({
            showClose: true,
            message: '请完成上一操作的审核后再进行操作',
            type: 'warning',
            duration: 4000
          })
          return
        }
        // 如果上一次是新增，并且已送审核，则不允许修改
        if (operateCode === 'add' && verifyState === '1') {
          this.$message({
            showClose: true,
            message: '请完成上一操作的审核后再进行操作',
            type: 'warning',
            duration: 4000
          })
          return
        }
        // 如果上一操作不是编辑或者新增，则必须审核通过后才可以操作
        if (
          operateCode !== 'edit' &&
          operateCode !== 'add' &&
          verifyState !== '2'
        ) {
          this.$message({
            showClose: true,
            message: '请完成上一操作的审核后再进行操作',
            type: 'warning',
            duration: 4000
          })
          return
        }

        let refForm = 'registerForm'
        // 离休人员编辑
        if (selection.state === '1') {
          this.dialogStatus = '修改离退休人员'
          this.dialogTitle = '修改-离退休人员'
          this.quitFormVisible = true
          this.formData = row
          let state = false
          this.agencyBankLists.forEach(item => {
            if (item.code === this.formData.salaCardBank) {
              state = true
            }
          })
          if (!state) {
            for (const item in this.allBankLists) {
              if (this.allBankLists[item].code === this.formData.salaCardBank) {
                this.formData.salaCardBank = this.allBankLists[item].name
              }
            }
          }
          this.formData.agencyName = this.listQuery.agencyName
          const workYear = selection[0].workInitDate.split('-')[0]
          const currentYear = new Date().getFullYear()
          this.formData.workingYear = currentYear - workYear
          refForm = 'registerForm'
        } else if (selection.state === '3') {
          // 在职人员编辑
          this.dialogStatus = '修改在职人员'
          this.dialogTitle = '修改-在职人员'
          this.registerFormVisible = true
          this.formData = row
          let state = false
          this.agencyBankLists.forEach(item => {
            if (item.code === this.formData.salaCardBank) {
              state = true
            }
          })
          if (!state) {
            for (const item in this.allBankLists) {
              if (this.allBankLists[item].code === this.formData.salaCardBank) {
                this.formData.salaCardBank = this.allBankLists[item].name
              }
            }
          }
          this.formData.agencyName = this.listQuery.agencyName
          refForm = 'quitForm'
        }
        this.$nextTick(() => {
          this.$refs[refForm].clearValidate()
        })
      }
    },
    // 导入
    importFile() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        return
      }
      this.dialogImportFormVisible = true
    },
    // 查询
    query() {
      this.dialogQueryFormVisible = true
    },
    // 上传文件
    uploadExcel(item) {
      const fileObj = item.file
      // FormData 对象
      const form = new FormData()
      // 文件对象
      form.append('file', fileObj)
      Import(form).then(response => {
        this.$message({
          showClose: true,
          message: '导入成功',
          type: 'success',
          duration: 4000
        })
        this.dialogImportFormVisible = false
      }).then(() => {
        this.getList()
      })
    },
    getList() {
      this.listLoading = true
      getPersonOperateList(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.getList()
    },
    handleQuery() {
      this.listQuery.page = 1
      this.getList()
      this.dialogQueryFormVisible = false
    },
    restetFormData() {
      this.formData = {
        id: '',
        state: this.formData.state,
        agencyId: this.listQuery.agencyId,
        agencyCode: this.listQuery.agencyCode,
        agencyName: this.listQuery.agencyName,
        meritPayCode: '',
        personName: '',
        sexCode: '',
        natCode: '',
        idenTypeCode: '',
        idenNo: '',
        birthday: '',
        schRecCode: '',
        personTypeCode: '',
        personAddress: '',
        isAuth: '',
        workInitDate: '',
        enterAgencyDate: '',
        posCode: '',
        grCode: '',
        tecGrCode: '',
        salaGrCode: '',
        salaCardNo: '',
        salaCardBank: '',
        govCredCardNo: '',
        govCredCardBank: '',
        startDate: new Date(),
        nation: '',
        isUniSala: '',
        retireDate: '',
        workingYear: '',
        personIdeCode: '',
        deleteType: '',
        fundmode: '',
        isSpecialPost: '',
        outToAgency: '', // 去向单位id
        toAgencyName: '' // 去向单位名称
      }
    },
    // 打开选择人员页面
    handleAdd() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        return
      }
      this.formData.state = ''
      this.addFormVisible = true
    },
    // 新增页面选择人员按钮确定按钮
    handleAddDialog() {
      this.isEdit = false
      if (this.formData.state === '3') {
        // 新增在职人员
        this.restetFormData()

        this.getBankByAgencyId()

        if (this.agencyBankLists.length === 1) {
          this.disable = true
          this.formData.salaCardBank = this.agencyBankLists[0].code
        }
        this.registerFormVisible = true
        // this.addFormVisible = false
        this.dialogStatus = '新增在职人员'
        this.dialogTitle = '新增-在职人员'
        this.addFormVisible = false

        this.$nextTick(() => {
          this.$refs['registerForm'].clearValidate()
        })
      } else if (this.formData.state === '1') {
        // 新增离休人员
        this.restetFormData()
        this.quitFormVisible = true
        this.getBankByAgencyId()

        if (this.agencyBankLists.length === 1) {
          this.disable = true
          this.formData.salaCardBank = this.agencyBankLists[0].code
        }
        // this.addFormVisible = false
        this.dialogStatus = '新增离退休人员'
        this.dialogTitle = '新增-离退休人员'
        this.addFormVisible = false
        this.$nextTick(() => {
          this.$refs['quitForm'].clearValidate()
        })
      } else {
        this.$message({
          showClose: true,
          message: '请选择人员类型',
          type: 'warning',
          duration: 4000
        })
      }
    },
    // 导出模板
    exportTemplate() {
      Export().then(response => {
        const link = document.createElement('a')
        const objectUrl = URL.createObjectURL(response)
        link.href = objectUrl
        link.download = '人员导出模板.xlsx'
        link.click()
        URL.revokeObjectURL(objectUrl)
      })
    },
    // 导出
    outPutFile() {
      outPutPersonOperateList(this.listQuery).then(response => {
        const link = document.createElement('a')
        const objectUrl = URL.createObjectURL(response)
        link.href = objectUrl
        link.download = '人员变动编辑.xlsx'
        link.click()
        URL.revokeObjectURL(objectUrl)
      })
    },
    // 编辑
    handleEdit() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        return
      }

      this.isEdit = true
      this.disable = false
      const selection = this.$refs.singalTable.selection
      if (selection.length !== 1) {
        this.$message({
          showClose: true,
          message: '请选择一条数据',
          type: 'warning',
          duration: 4000
        })
        return
      }
      const operateCode = selection[0].operateCode
      const verifyState = selection[0].verifyState
      const isReal = selection[0].isReal
      if (verifyState === '2' && isReal === 0) {
        this.$message({
          showClose: true,
          message: '未生效数据不允许修改',
          type: 'warning',
          duration: 4000
        })
        return
      }
      // 如果上一次是编辑，并且已送审核，则不允许修改
      if (operateCode === 'edit' && verifyState === '1') {
        this.$message({
          showClose: true,
          message: '请完成上一操作的审核后再进行操作',
          type: 'warning',
          duration: 4000
        })
        return
      }
      // 如果上一次是新增，并且已送审核，则不允许修改
      if (operateCode === 'add' && verifyState === '1') {
        this.$message({
          showClose: true,
          message: '请完成上一操作的审核后再进行操作',
          type: 'warning',
          duration: 4000
        })
        return
      }
      // 如果上一次是待调入，并且已送审核，则不允许修改
      if (operateCode === 'in' && verifyState != null) {
        this.$message({
          showClose: true,
          message: '请完成上一操作的审核后再进行操作',
          type: 'warning',
          duration: 4000
        })
        return
      }
      // 如果上一操作不是编辑或者新增，则必须审核通过后才可以操作
      if (
        operateCode !== 'edit' &&
        operateCode !== 'add' &&
        verifyState !== '2'
      ) {
        this.$message({
          showClose: true,
          message: '请完成上一操作的审核后再进行操作',
          type: 'warning',
          duration: 4000
        })
        return
      }
      let refForm = 'registerForm'
      // 离休人员编辑
      if (selection[0].state === '1') {
        this.dialogStatus = '修改离退休人员'
        this.dialogTitle = '修改-离退休人员'
        this.quitFormVisible = true
        this.formData = Object.assign({}, this.formData, selection[0])
        this.formData.agencyName = this.listQuery.agencyName

        let state = false
        this.agencyBankLists.forEach(item => {
          if (item.code === this.formData.salaCardBank) {
            state = true
          }
        })
        if (!state) {
          for (const item in this.allBankLists) {
            if (this.allBankLists[item].code === this.formData.salaCardBank) {
              this.formData.salaCardBank = this.allBankLists[item].name
            }
          }
        }

        const workYear = selection[0].workInitDate.split('-')[0]
        const currentYear = new Date().getFullYear()
        this.formData.workingYear = currentYear - workYear
        refForm = 'registerForm'
      } else if (selection[0].state === '3') {
        // 在职人员编辑
        this.dialogStatus = '修改在职人员'
        this.dialogTitle = '修改-在职人员'
        this.registerFormVisible = true
        this.formData = Object.assign({}, this.formData, selection[0])
        this.formData.agencyName = this.listQuery.agencyName

        let state = false
        this.agencyBankLists.forEach(item => {
          if (item.code === this.formData.salaCardBank) {
            state = true
          }
        })
        if (!state) {
          for (const item in this.allBankLists) {
            if (this.allBankLists[item].code === this.formData.salaCardBank) {
              this.formData.salaCardBank = this.allBankLists[item].name
            }
          }
        }
        refForm = 'quitForm'
      }
      this.$nextTick(() => {
        this.$refs[refForm].clearValidate()
      })
    },

    // 新增/编辑保存人员信息
    handleAddPerson(formRef) {
      this.$refs[formRef].validate(valid => {
        if (valid) {
          this.registerLoading = true
          this.quitLoading = true
          if (this.formData.state === '1') {
            this.formData.meritPayCode = '11'
            this.formData.personTypeCode = '11'
          }
          const tempData = Object.assign({}, this.formData)
          tempData.outToAgency = ''
          tempData.deleteType = ''
          if (this.formData.id !== '') {
            // 编辑
            if (
              tempData.operateCode === 'add' &&
              (tempData.verifyState === '0' || tempData.verifyState === '-1')
            ) {
              tempData.operateCode = 'add'
            } else if (tempData.operateCode === 'in' &&
              (tempData.verifyState === '0' || tempData.verifyState === '-1' || tempData.verifyState === null)) {
              tempData.operateCode = 'in'
            } else {
              tempData.operateCode = 'edit'
              if (tempData.verifyState === '2') {
                tempData.verifyState = '0'
              }
            }

            let sstate = false
            this.agencyBankLists.forEach(item => {
              if (item.code === tempData.salaCardBank) {
                sstate = true
              }
            })
            if (!sstate) {
              sstate = false
              this.$message({
                showClose: true,
                message: '请修改银行信息',
                type: 'warning',
                duration: 4000
              })
              this.registerLoading = false
              return
            }
            savePersonInfo(tempData)
              .then(response => {
                this.registerFormVisible = false
                this.quitFormVisible = false
                this.$message({
                  showClose: true,
                  message: '更新成功',
                  type: 'success',
                  duration: 4000
                })

                this.$emit('handleInCallback')
                this.updateFormVisible = false
                this.registerLoading = false
                this.quitLoading = false
                this.handleFilter()
              })
              .catch(() => {
                this.registerLoading = false
                this.quitLoading = false
              })
          } else {
            // 新增
            tempData.operateCode = 'add'
            savePersonInfo(tempData)
              .then(response => {
                this.registerFormVisible = false
                this.quitFormVisible = false
                this.$message({
                  showClose: true,
                  message: '保存成功',
                  type: 'success',
                  duration: 4000
                })
                this.registerLoading = false
                this.quitLoading = false
                this.handleFilter()
              })
              .catch(() => {
                this.registerLoading = false
                this.quitLoading = false
              })
          }
        }
      })
    },
    handleAddPersonupdate(formRef) {
      this.$refs[formRef].validate(valid => {
        if (valid) {
          this.registerLoading = true
          this.quitLoading = true
          const tempData = Object.assign({}, this.formData)
          tempData.outToAgency = ''
          tempData.deleteType = ''
          if (this.formData.id !== '') {
            tempData.operateCode = 'in'

            let sstate = false
            this.agencyBankLists.forEach(item => {
              if (item.code === tempData.salaCardBank) {
                sstate = true
              }
            })
            if (!sstate) {
              sstate = false
              this.$message({
                showClose: true,
                message: '请修改银行信息',
                type: 'warning',
                duration: 4000
              })
              this.registerLoading = false
              return
            }
            savePersonInfo(tempData)
              .then(response => {
                tempData.verifyState = '0'
                savePersonInfo(tempData).then(response => {
                  this.$message({
                    showClose: true,
                    message: '调入成功',
                    type: 'success',
                    duration: 4000
                  })
                }).catch(() => {
                  this.$emit('handleInCallback')
                })
                this.$emit('handleInCallback')
                this.updateFormVisible = false
                this.updateFormVisibleLoading = false
                this.handleFilter()
              })
              .catch(() => {
                this.updateFormVisibleLoading = false
              })
          }
        }
      })
    },
    handleOut() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        return
      }
      // 调出
      this.formData.outToAgency = ''
      this.formData.startDate = ''
      const selection = this.$refs.singalTable.selection
      if (selection.length !== 1) {
        this.$message({
          showClose: true,
          message: '请选择一条数据',
          type: 'warning',
          duration: 4000
        })
        return
      }
      this.$nextTick(() => {
        this.$refs['outForm'].clearValidate()
      })
      const verifyState = selection[0].verifyState
      const isReal = selection[0].isReal
      if (verifyState === '2' && isReal === 0) {
        this.$message({
          showClose: true,
          message: '未生效数据不允许修改',
          type: 'warning',
          duration: 4000
        })
        return
      }
      if (verifyState !== '2') {
        this.$message({
          showClose: true,
          message: '请完成上一操作的审核后再进行操作',
          type: 'warning',
          duration: 4000
        })
        return
      }
      this.showTree = false
      this.outFormVisible = true
      this.restetFormData()
      this.formData = Object.assign({}, this.formData, selection[0])
      this.formData.startDate = new Date()
      let param = {}
      param = { agencyId: this.listQuery.agencyId }
      getAgencyTree(param).then(response => {
        this.agencyData = response.data
      })
    },
    // 是否显示树
    handleShowTree() {
      this.showTree = !this.showTree
    },
    // 树节点点击
    handleNodeClick(data) {
      if (!Object.prototype.hasOwnProperty.call(data, 'children')) {
        this.formData.toAgencyName = data.label
        // this.formData.agencyCode = data.code
        this.formData.outToAgency = data.id
      }
    },
    // 树过滤
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 调出保存
    handleOutSave() {
      this.$refs['outForm'].validate(valid => {
        if (valid) {
          if (this.formData.outToAgency === '') {
            this.$message({
              showClose: true,
              message: '请选择去向单位',
              type: 'warning',
              duration: 4000
            })
            return
          }
          this.outLoading = true
          // 判断调出对方单位工资是否送审，如果已送审，不允许调出
          getAgencyVerifyByAgencyId(this.formData.outToAgency).then((response) => {
            if (response.data.isSubmitInAgency === 1) {
              this.$message({
                showClose: true,
                message: '对方单位工资已送审，不允许调出',
                type: 'warning',
                duration: 4000
              })
              this.outLoading = false
              return
            } else {
              const tempData = Object.assign({}, this.formData)
              tempData.operateCode = 'out'
              tempData.deleteType = ''
              savePersonInfo(tempData).then(response => {
                this.outFormVisible = false
                this.$message({
                  showClose: true,
                  message: '调出成功',
                  type: 'success',
                  duration: 4000
                })
                this.outLoading = false
                this.handleFilter()
              }).catch(() => {
                this.outLoading = false
              })
            }
          }).catch(() => {
            this.outLoading = false
          })
        }
      })
    },
    // 调入
    handleIn() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        this.$emit('handleInCallback')
        return
      }
      const selection = this.$refs.singalTable.selection
      if (selection.length !== 1) {
        this.$message({
          showClose: true,
          message: '请选择一条数据',
          type: 'warning',
          duration: 4000
        })
        this.$emit('handleInCallback')
        return
      }
      const operateCode = selection[0].operateCode
      const verifyState = selection[0].verifyState
      const isReal = selection[0].isReal
      if (verifyState === '2' && isReal === 0) {
        this.$message({
          showClose: true,
          message: '未生效数据不允许修改',
          type: 'warning',
          duration: 4000
        })
        this.$emit('handleInCallback')
        return
      }
      if (verifyState === '2') {
        this.$message({
          showClose: true,
          message: '只能调入待调入的人员',
          type: 'warning',
          duration: 4000
        })
        this.$emit('handleInCallback')
        return
      }
      if (operateCode === 'in' && verifyState !== null) {
        this.$message({
          showClose: true,
          message: '请完成上一操作的审核后再进行操作',
          type: 'warning',
          duration: 4000
        })
        this.$emit('handleInCallback')
        return
      }
      if (operateCode !== 'in' && verifyState !== '2') {
        this.$message({
          showClose: true,
          message: '只能调入待调入的人员',
          type: 'warning',
          duration: 4000
        })
        this.$emit('handleInCallback')
        return
      }
      // 判断调入人员的银行与当前单位银行是否一致，如果不一致，需要提示修改
      const salaBankCode = selection[0].salaCardBank

      let isBank = false
      for (const index in this.agencyBankLists) {
        if (this.agencyBankLists[index].code === salaBankCode) {
          isBank = true
        }
      }
      if (isBank) {
        // this.$confirm('确定调入吗?', '提示', {
        //   closeOnClickModal: false,
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // })
        //   .then(() => {
        const tempData = Object.assign({}, selection[0])
        tempData.verifyState = '0'
        savePersonInfo(tempData)
          .then(response => {
            this.$message({
              showClose: true,
              message: '调入成功',
              type: 'success',
              duration: 4000
            })
            this.$emit('handleInCallback')
            this.handleFilter()
          })
          .catch(() => {
            this.$emit('handleInCallback')
          })
          // })
          // .catch(() => {
          //   this.$emit('handleInCallback')
          // })
      } else {
        // this.$message({
        //   showClose: true,
        //   message: '请先修改银行信息',
        //   type: 'warning',
        //   duration: 4000
        // })
        this.$emit('handleInCallback')
        this.updateFormVisible = true
        const selection = this.$refs.singalTable.selection
        this.formData = Object.assign({}, this.formData, selection[0])

        let state = false
        this.agencyBankLists.forEach(item => {
          if (item.code === this.formData.salaCardBank) {
            state = true
          }
        })
        if (!state) {
          for (const item in this.allBankLists) {
            if (this.allBankLists[item].code === this.formData.salaCardBank) {
              this.formData.salaCardBank = this.allBankLists[item].name
            }
          }
        }
      }
    },
    // 消减
    handleReduction() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        return
      }
      this.formData.startDate = ''
      const selection = this.$refs.singalTable.selection
      if (selection.length !== 1) {
        this.$message({
          showClose: true,
          message: '请选择一条数据',
          type: 'warning',
          duration: 4000
        })
        return
      }
      const verifyState = selection[0].verifyState
      const isReal = selection[0].isReal
      if (verifyState === '2' && isReal === 0) {
        this.$message({
          showClose: true,
          message: '未生效数据不允许修改',
          type: 'warning',
          duration: 4000
        })
        return
      }
      if (verifyState !== '2') {
        this.$message({
          showClose: true,
          message: '请完成上一操作的审核后再进行操作',
          type: 'warning',
          duration: 4000
        })
        return
      }
      this.reductionFormVisible = true
      this.restetFormData()
      this.formData = Object.assign({}, this.formData, selection[0])
      this.formData.deleteType = ''
      this.formData.startDate = new Date()
    },
    // 消减保存
    handleReducationSave() {
      this.$refs['reductionForm'].validate(valid => {
        if (valid) {
          this.reducationLoading = true
          const tempData = Object.assign({}, this.formData)
          tempData.operateCode = 'delete'
          tempData.outToAgency = ''
          savePersonInfo(tempData)
            .then(response => {
              this.reductionFormVisible = false
              this.$message({
                showClose: true,
                message: '消减成功',
                type: 'success',
                duration: 4000
              })
              this.reducationLoading = false
              this.handleFilter()
            })
            .catch(() => {
              this.reducationLoading = false
            })
        }
      })
    },
    // 送审
    submitVerify() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        this.$emit('verifyCallback')
        return
      }
      this.operatePersonLists = []
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要送审的人员',
          type: 'warning',
          duration: 4000
        })
        this.$emit('verifyCallback')
        return
      }
      const personIds = []
      selection.forEach(item => {
        this.operatePersonLists.push(item)
        personIds.push(item.personId)
      })
      // 校验附件
      const params = {}
      params['personId'] = personIds.join(',')
      params['agencyId'] = this.listQuery.agencyId
      params['operateType'] = '2'
      queryPersonFileNum(params).then(response => {
        if (response.data === 0) {
          this.$message({
            showClose: true,
            message: '存在未上传附件的人员',
            type: 'warning',
            duration: 4000
          })
          this.$emit('verifyCallback')
          return
        }
        // this.$confirm('确定送审吗?', '提示', {
        //   closeOnClickModal: false,
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // })
        //   .then(() => {
        submitPersonOperateList(this.operatePersonLists)
          .then(response => {
            this.$message({
              showClose: true,
              message: '送审成功',
              type: 'success',
              duration: 4000
            })
            this.$emit('verifyCallback')
            this.handleFilter()
          })
          .catch(() => {
            this.$emit('verifyCallback')
          })
      })
        .catch(() => {
          this.$emit('verifyCallback')
        })
      // })
    },
    // 撤销送审
    revokeVerify() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        this.$emit('revokeVerifyCallback')
        return
      }
      this.operatePersonLists = []
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要取消送审的人员',
          type: 'warning',
          duration: 4000
        })
        this.$emit('revokeVerifyCallback')
        return
      }
      selection.forEach(item => {
        this.operatePersonLists.push(item)
      })
      // this.$confirm('确定取消送审吗?', '提示', {
      //   closeOnClickModal: false,
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      //   .then(() => {
      undoSubmitPersonOperateList(this.operatePersonLists)
        .then(response => {
          this.$message({
            showClose: true,
            message: '取消送审成功',
            type: 'success',
            duration: 4000
          })
          this.$emit('revokeVerifyCallback')
          this.handleFilter()
        })
        .catch(() => {
          this.$emit('revokeVerifyCallback')
        })
        // })
        // .catch(() => {
        //   this.$emit('revokeVerifyCallback')
        // })
    },
    // 撤销调出
    revokeOut() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        this.$emit('revokeOutCallback')
        return
      }
      this.operatePersonLists = []
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要撤销调出的人员',
          type: 'warning',
          duration: 4000
        })
        this.$emit('revokeOutCallback')
        return
      }
      let validFlag = true
      selection.forEach(item => {
        this.operatePersonLists.push(item)
        if (item.operateCode !== 'out') {
          this.$message({
            showClose: true,
            message: '只能撤销调出的人员',
            type: 'warning',
            duration: 4000
          })
          this.$emit('revokeOutCallback')
          validFlag = false
          throw new Error('只能撤销调出的人员')
        }
      })
      if (validFlag) {
        // this.$confirm('确定撤销调出吗?', '提示', {
        //   closeOnClickModal: false,
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // })
        //   .then(() => {
        revokeOperate(this.operatePersonLists)
          .then(response => {
            this.$message({
              showClose: true,
              message: '撤销调出成功',
              type: 'success',
              duration: 4000
            })
            this.$emit('revokeOutCallback')
            this.handleFilter()
          })
          .catch(() => {
            this.$emit('revokeOutCallback')
          })
          // })
          // .catch(() => {
          //   this.$emit('revokeOutCallback')
          // })
      }
    },
    // 撤销调入
    revokeIn() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        this.$emit('revokeInCallback')
        return
      }
      this.operatePersonLists = []
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要撤销调入的人员',
          type: 'warning',
          duration: 4000
        })
        this.$emit('revokeInCallback')
        return
      }
      let validFlag = true
      selection.forEach(item => {
        this.operatePersonLists.push(item)
        if (item.operateCode !== 'in') {
          this.$message({
            showClose: true,
            message: '只能撤销调入的人员',
            type: 'warning',
            duration: 4000
          })
          this.$emit('revokeInCallback')
          validFlag = false
          throw new Error('只能撤销调出的人员')
        }
      })
      if (validFlag) {
        // this.$confirm('确定撤销调入吗?', '提示', {
        //   closeOnClickModal: false,
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // })
        //   .then(() => {
        revokeOperate(this.operatePersonLists)
          .then(response => {
            this.$message({
              showClose: true,
              message: '撤销调入成功',
              type: 'success',
              duration: 4000
            })
            this.$emit('revokeInCallback')
            this.handleFilter()
          })
          .catch(() => {
            this.$emit('revokeInCallback')
          })
          // })
          // .catch(() => {
          //   this.$emit('revokeInCallback')
          // })
      }
    },
    // 撤销消减
    revokeInDelete() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        this.$emit('revokeInDeleteCallback')
        return
      }
      this.operatePersonLists = []
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要撤销消减的人员',
          type: 'warning',
          duration: 4000
        })
        this.$emit('revokeInDeleteCallback')
        return
      }
      let validFlag = true
      selection.forEach(item => {
        this.operatePersonLists.push(item)
        if (item.operateCode !== 'delete') {
          this.$message({
            showClose: true,
            message: '只能撤销消减的人员',
            type: 'warning',
            duration: 4000
          })
          this.$emit('revokeInDeleteCallback')
          validFlag = false
          throw new Error('只能撤销消减的人员')
        }
      })
      if (validFlag) {
        // this.$confirm('确定撤销消减吗?', '提示', {
        //   closeOnClickModal: false,
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // })
        //   .then(() => {
        revokeOperate(this.operatePersonLists)
          .then(response => {
            this.$message({
              showClose: true,
              message: '撤销消减成功',
              type: 'success',
              duration: 4000
            })
            this.$emit('revokeInDeleteCallback')
            this.handleFilter()
          })
          .catch(() => {
            this.$emit('revokeInDeleteCallback')
          })
          // })
          // .catch(() => {
          //   this.$emit('revokeInDeleteCallback')
          // })
      }
    },
    // 删除
    handleDelete() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        this.$emit('handleDeleteCallback')
        return
      }
      this.operatePersonLists = []
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要撤销编辑的人员',
          type: 'warning',
          duration: 4000
        })
        this.$emit('handleDeleteCallback')
        return
      }
      selection.forEach(item => {
        this.operatePersonLists.push(item)
      })
      // this.$confirm('确定撤销编辑吗?', '提示', {
      //   closeOnClickModal: false,
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      //   .then(() => {
      revokeOperate(this.operatePersonLists)
        .then(response => {
          this.$message({
            showClose: true,
            message: '撤销编辑成功',
            type: 'success',
            duration: 4000
          })
          this.$emit('handleDeleteCallback')
          this.handleFilter()
        })
        .catch(() => {
          this.$emit('handleDeleteCallback')
        })
        // })
        // .catch(() => {
        //   this.$emit('handleDeleteCallback')
        // })
    },
    // 撤销修改
    revokeEdit() {
      if (this.salaryState === 1) {
        this.$emit('salaryStateCallback')
        this.$emit('revokeEditCallback')
        return
      }
      this.operatePersonLists = []
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要撤销修改的人员',
          type: 'warning',
          duration: 4000
        })
        this.$emit('revokeEditCallback')
        return
      }
      let validFlag = true
      selection.forEach(item => {
        this.operatePersonLists.push(item)
        if (item.operateCode !== 'edit') {
          this.$message({
            showClose: true,
            message: '只能撤销修改的人员',
            type: 'warning',
            duration: 4000
          })
          this.$emit('revokeEditCallback')
          validFlag = false
          throw new Error('只能撤销修改的人员')
        }
      })
      if (validFlag) {
        // this.$confirm('确定撤销修改吗?', '提示', {
        //   closeOnClickModal: false,
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // })
        //   .then(() => {
        revokeOperate(this.operatePersonLists)
          .then(response => {
            this.$message({
              showClose: true,
              message: '撤销修改成功',
              type: 'success',
              duration: 4000
            })
            this.$emit('revokeEditCallback')
            this.handleFilter()
          })
          .catch(() => {
            this.$emit('revokeEditCallback')
          })
          // })
          // .catch(() => {
          //   this.$emit('revokeEditCallback')
          // })
      }
    },
    // 新增离休人员时计算工龄
    calculationWorkYear(type) {
      if (type === 'workInitDate') {
        let retireYear = this.formData.retireDate
        if (retireYear !== '') {
          const workInitYear = this.formData.workInitDate.split('-')[0]
          retireYear = retireYear.split('-')[0]
          this.formData.workingYear = retireYear - workInitYear
        }
      } else if (type === 'retireDate') {
        let workInitYear = this.formData.workInitDate
        if (workInitYear !== '') {
          const retireYear = this.formData.retireDate.split('-')[0]
          workInitYear = workInitYear.split('-')[0]
          this.formData.workingYear = retireYear - workInitYear
        }
      }
    },
    // 获取在职和离职人数
    getStateNum() {
      getStateNum(this.listQuery).then(response => {
        if (response.data.registerNum !== []) {
          this.registerNum = response.data.registerNum + response.data.quitNum
        } else {
          this.registerNum = 0
        }
        if (response.data.quitNum !== []) {
          this.quitNum = response.data.quitNum
        } else {
          this.quitNum = 0
        }
      })
    },
    initBaseInfo() {
      getSex().then(response => {
        this.sexLists = Object.assign({}, response.data)
      })
      getNat().then(response => {
        this.natLists = Object.assign({}, response.data)
      })
      getCitType().then(response => {
        this.citTypeLists = Object.assign({}, response.data)
      })
      getSchrec().then(response => {
        this.schrecLists = Object.assign({}, response.data)
      })
      getPosgr().then(response => {
        this.posgrLists = Object.assign({}, response.data)
      })
      getGr().then(response => {
        this.grLists = Object.assign({}, response.data)
      })
      getTecgr().then(response => {
        this.tecgrLists = Object.assign({}, response.data)
      })
      getSalagr().then(response => {
        this.salagrLists = Object.assign({}, response.data)
      })
      getAgencyBank().then(response => {
        this.agencyBankLists = Object.assign({}, response.data)
        this.allBankLists = Object.assign({}, response.data)
      })
      getCountry().then(response => {
        this.countryLists = Object.assign({}, response.data)
      })
      getAgencyPeride().then(response => {
        this.personPerideLists = Object.assign({}, response.data)
      })
      getFundmode().then(response => {
        this.fundmodeLists = Object.assign({}, response.data)
      })
    },
    // 获取单位的银行
    getBankByAgencyId() {
      // 获取单位选择的银行，过滤掉单位未选择的银行

      queryAgencyInfoById(this.listQuery).then(response => {
        let agencyBank = response.data[0].agencyBankName

        if (agencyBank !== '' && agencyBank != null && agencyBank !== []) {
          if (this.allBankLists !== []) {
            const temp = []
            agencyBank = agencyBank.substring(1, agencyBank.length - 1).split(',')

            for (const item in this.allBankLists) {
              for (const index in agencyBank) {
                if (this.allBankLists[item].code === agencyBank[index]) {
                  const value = this.allBankLists[item]
                  temp.push(value)
                }
              }
            }
            this.agencyBankLists = temp
          }
        } else {
          this.agencyBankLists = []
        }
      })
    },
    // 附件方法
    appendixOpen() {
      this.selection = this.$refs.singalTable.selection
      if (this.selection.length === 0) {
        this.openenClose = false
      }
      const personList = []
      this.selection.forEach(item => {
        personList.push({ id: item.personId })
      })
      if (this.tabPane === '0' || this.tabPane === '-1') {
        this.openenClose = true
      }
      this.$refs.enc.appendixOpen(personList, this.openenClose, undefined, this.listQuery.agencyId)
      // }
    },
    // 查看详情
    viewInfo(currenRow) {
      let personState
      const operateType = undefined
      const agencyIds = this.listQuery.agencyId
      if (currenRow.operateCode === 'in' && currenRow.verifyState === null) {
        personState = '待调入'
      }
      this.$refs.personSalaryInfo.viewInfo(currenRow.personId, operateType, agencyIds, personState)
    },
    // 查询工资编报状态
    getSalaryState() {
      getSalaryState(this.listQuery).then(response => {
        this.salaryState = response.data.is_submit_in_agency
      })
    },
    handleTree(data) {
      this.listQuery.agencyId = data.id
      this.listQuery.agencyCode = data.label.split('-')[0]
      this.listQuery.agencyName = data.label.split('-')[1]
      this.unitName = data.label.split('-')[1]
      this.formData.agencyId = data.id
      this.formData.agencyCode = data.label.split('-')[0]
      this.formData.agencyName = data.label.split('-')[1]
      this.listQuery.flag = this.tabPane
      // this.initBaseInfo()
      this.getBankByAgencyId()
      this.handleFilter()
      // 获取在职和离休人数
      this.getStateNum()
      this.getSalaryState()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/border.scss"; /*引入公共样式*/
.addForm {
  text-align: center;
  .selectSpan {
    margin-right: 40%;
    font-size: 18px;
    font-weight: 500;
  }
  .addSelectRow {
    margin-top: 3%;
  }
  .addButRow {
    margin-top: 5%;
  }
  .addTitpsRow {
    margin-top: 8%;
    margin-bottom: 8%;
    .addTitps {
      font-size: 18px;
      color: #ff0000;
      font-weight: 600;
    }
  }
}
.el-row-out {
  display: flex;
  flex-wrap: wrap;
  .el-tree-out {
    height: auto;
    max-height: 500px;
    overflow: auto;
  }
  .tipsCol {
    margin-top: 5%;
  }

  .tipsSpan {
    color: #ff0000;
    font-size: 18px;
    font-weight: 600;
  }
}
.reductionTipsCol {
  margin-bottom: 20px;
  .reductionTips {
    color: #ff0000;
    font-size: 14px;
    font-weight: 600;
    margin-left: 5%;
    margin-bottom: 5%;
  }
}
.numCol {
  margin-top: 10px;
  span {
    font-size: 14px;
  }
}
.treewidth .el-row-out .el-tree-out[data-v-a4a4fa96] {
  height: 413px;
}
.redstar .el-form-item__error {
  margin-top: 45px !important;
}
</style>
